<!doctype html>
<html>
    <head>
        <title>Tumblr Backup</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
        <style>
            #header {
                margin: 75px auto 50px auto;
                text-align: center;
                font-size: 2em;
            }
            #header h1, #header h3 { margin: 0; }
            #header h3 { font-style: italic; }
            #main {
                width: 400px;
                margin: 0 auto;
                text-align: center;
                background: #CCC;
                padding: 15px;
            }
            #archive { display: none; }
            #footer {
                width: 600px;
                margin: 50px auto;
                text-align: center;
            }
            .strike { text-decoration: line-through; }
        </style>
    </head>
    <body>
        <div id="header"><h1>Tumblr Backup</h1></div>
        <div id="main">
            <span id="message"></span>
            <a id="archive" href="#"><br>Download your backup here!</a>
            <span id="prompt">Enter your blog name below to begin the archive process</span><br>
            <form id="blog-form">
                <input type="text" id="blog"><input type="submit" value="Archive">
            </form>
            <a id="ongoing" href="#"><br>Or view all archives in progress!</a>
        </div>
        <div id="footer">
            <p>This script may contain bugs, and produces extremely minimalistic output. Feel free to <a href="http://fugiman.tumblr.com/ask">send me an ask</a> if you need help or have any ideas (or if you found this useful!).</p>
            <p>If you leave the page, or otherwise disconnect from the archive server, the script will still backup your blog. You can <a href="/archives/">view archived blogs</a> or refresh the page and re-enter your blog name to reconnect to archival server.</p>
            <p>Archives will be deleted after 6 hours. You can not archive a blog that is already archived.</p>
            <p>To open TAR archives in windows, use <a href="http://www.7-zip.org/">7zip</a>. Mac and Linux should have built in support (tar -xf FILENAME).</p>
            <p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=63WAHWQYH6LGY&lc=US&item_name=Tumblr%20Backup%20Support&item_number=TUMBLRBACKUP&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted">Enjoy this service? A few dollars goes a long way to alleviating server costs!</a></p>
            <p><a href="https://github.com/Fugiman/Tumblr-Backup/">Source Code</a></p>
        </div>
        <script>
            $("#blog-form").submit(function() {
                $("#prompt").hide();
                $("#blog-form").hide();
                $("#already-done").hide();
                $("#ongoing").hide();
                var conn = new SockJS(location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : "") + "/sockjs/");
                var done = false;
                conn.onopen  = function() {
                    $("#message").text("Connected to archival server");
                    $("#main").css("background", "#BCE8F1");
                    conn.send(JSON.stringify({"blog": $("#blog").val()}));
                }
                conn.onmessage = function(e) { 
                    var data = JSON.parse(e.data);
                    if(data.message) {
                        $("#message").text(data.message);
                    }
                    if(data.archive) {
                        done = true;
                        $("#archive").attr("href", data.archive).show();
                        $("#main").css("background", "#D6E9C6");
                    }
                    if(data.error) {
                        done = true;
                        $("#message").text(data.error);
                        $("#main").css("background", "#EED3D7");
                    }
                }
                conn.onclose  = function() {
                    if(!done) {
                        $("#message").text("Connection to archival server lost!");
                        $("#main").css("background", "#EED3D7");
                    }
                }
                return false;
            });
            $("#ongoing").click(function() {
                var blogs = {};
                var timer = null;
                $("#main").html("");
                var conn = new SockJS(location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : "") + "/sockjs/");
                conn.onopen  = function() {
                    $("#main").css("background", "#BCE8F1");
                    conn.send(JSON.stringify({"show_all":true}));
                    timer = setInterval(function() { conn.send(JSON.stringify({"show_all":true})); }, 60000);
                }
                conn.onmessage = function(e) { 
                    var data = JSON.parse(e.data);
                    if(!(data.blog in blogs)) {
                        blogs[data.blog] = $("<p></p>");
                        $("#main").append(blogs[data.blog]);
                    }
                    blogs[data.blog].text(data.blog + ": " + data.message || data.error);
                }
                conn.onclose  = function() {
                    $("#main").css("background", "#EED3D7").text("Connection to archival server lost!");
                    if(timer)
                        clearInterval(timer);
                }
                return false;
            });
        </script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-41105948-1', 'fugiman.com');
            ga('send', 'pageview');
        </script>
    </body>
</html>
